<template>
  <div>
    <!-- Page Title -->
    <div class="page-title">
      <div class="row justify-content-between align-items-center">
        <div class="col-md-6 mb-3 mb-md-0">
          <h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
          <span class="text-sm text-white opacity-8">前端 2202A</span>
        </div>
      </div>
    </div>
    <!-- charts -->
    <div class="row">
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h6 class="text-muted mb-1">就业薪资</h6>
                <span name="salary" class="h3 font-weight-bold mb-0 ">15500</span>
              </div>
              <div class="col-auto">
                <i class="bi bi-coin"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h6 class="text-muted mb-1">班级人数</h6>
                <span name="student_count" class="h3 font-weight-bold mb-0 ">80</span>
              </div>
              <div class="col-auto">
                <i class="bi bi-people"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h6 class="text-muted mb-1">平均年龄</h6>
                <span name="age" class="h3 font-weight-bold mb-0 ">24.40</span>
              </div>
              <div class="col-auto">
                <i class="bi bi-calendar2-week"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h6 class="text-muted mb-1">小组个数</h6>
                <span name="group_count" class="h3 font-weight-bold mb-0 ">8</span>
              </div>
              <div class="col-auto">
                <i class="bi bi-collection"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col col-xl-8">

        <!-- 第一个图 -->
        <div class="card" id="line" style="height: 400px;">
          <echart-one></echart-one>
        </div>
      </div>
      <div class="col col-xl-4">
        <div class="card" id="salary" style="height: 400px;">
          <echart-two></echart-two>
        </div>
      </div>
      <div class="col col-xl-12">
        <div class="card" style="height: 400px;">
          <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
              <h6 class="mb-0">班级每组薪资</h6>
              <div id="btns">
                <button type="button" :class="['btn', 'btn-xs', num == item ? 'btn-blue' : '']" v-for="item,index in 8"
                  :key="index" @click="listBtn(item)">{{ item }}</button>

              </div>
            </div>
          </div>
          <div class="card-body p-0" id="lines">
            <echart-san ref="sanRef"></echart-san>
          </div>
        </div>
      </div>
      <div class="col col-xl-4">
        <div class="card" id="gender" style="height: 500px;">
          <echart-si></echart-si>
        </div>
      </div>
      <div class="col col-xl-8">
        <div class="card" id="map" style="height: 500px;">
          <echart-wu v-if="mapData.length > 0" :provinceData="mapData"></echart-wu>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import echartOne from '@/components/echartOne.vue';
import echartTwo from '@/components/echartTwo.vue';
import echartSan from '@/components/echartSan.vue';
import echartSi from '@/components/echartSi.vue';
import echartWu from '@/components/echartWu.vue';
import { getEchart } from '@/api';
export default {
  components: { echartOne, echartTwo, echartSan, echartSi, echartWu },
  data() {
    return {
      echartList: [],
      mapData: [],
      list: 1,
      num: 1,
    };
  },
  mounted() {
    this.getEchart()
  },
  methods: {
    listBtn(item) {
      this.num = item
      this.$refs.sanRef.getEchartList(this.echartList[item])
    },
    async getEchart() {
       
      let res = await getEchart()
      this.echartList = res.groupData
      this.mapData = res.provinceData
      this.listBtn(1)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>